{% extends "base.html" %}
{% block title %}{{ user_data.username }}-个人中心{% endblock %}
{% block head %}<link rel="stylesheet" href="static/css/base.css">
<style>
  .user-top{
    margin-top: 25px;
    margin-left: 10px;
  }
  .user-top *{
    margin:0;
  }
  .user-profile{
      padding: 25px;
    }
</style>
{% endblock %}
{% block body %}



<!--user_data. XXX -->
<div class="main_body" style="margin-top: 60px;">
<div class="shadow row" style="height: 120px;margin-left: 0px;">
  <img style="margin-top: 25px;margin-left: 25px;border-radius: 75px;" src="../static/scratch/static/avatar.png" alt="用户" height="70px">
  <div class="user-top">
    <p>{{ user_data.username }}</p>
    <p style="color: coral;">undefined</p>
  </div>
</div>

<div class="shadow user-profile" style="min-height: 200px;margin-left: 0px;margin-top: 20px;">
  <div class="row" style="margin: 0px;"><a href="">P</a><p>个人简介</p></div>
  <p>{{ user_data.profiles }}</p>
</div>

<div class="row" style="margin-left: 0px;margin-top: 20px;"><a href="">P</a><p>TA的作品</p></div>
<div class="row" style="padding-bottom: 15px;margin-left: 0px;">
  {% for i in range(0, ProjectData|length) %}
  {% if i == 5%}
  <div class="card card-with cover_img" style="padding: 10px;">
  {% else %}
  <div class="card card-with cover_img" style="padding: 10px; margin-right: 10px;">
  {% endif %}
    <img src="{{ ProjectData[i].cover }}" class="cover_img" alt="作品封面" style="border-radius: 8px;">
    <div style="margin-top:5px">
      <img class="img-author" src="../static/scratch/static/avatar.png" alt="{{ ProjectData[i].author_name }}" width="15%">
      <div style="overflow:hidden;height: 40px;width: 80%;">
          <a style="white-space: nowrap;color:black;text-decoration: none;font-size: 15px;" href="/project/{{ ProjectData[i].id }}">{{ ProjectData[i].title }}</a>
          <h6 class="card-text" style="color: darkgray;font-size: 10px;">作者: {{ author[i] }}</h6>
      </div>
    </div>  
  </div>
  {% endfor %}
</div>

  <div style="margin-top:20px ;margin-left: 0px;">
    <div class="shadow" style="width: 100%;padding: 30px;">
      <div class="row"><a href="">P</a><p>评论区</p></div>
      <iframe height="450px" width="100%" class="iframe" src="/GetComment/User-{{ user_data.id }}" frameborder="0"></iframe>
  </div>
  </div>

</div>

{% endblock %}